var start = 0; //数据的开始位置
var len = 10; //每页记录数
var page = 1; //当前页码
var total = 0; //总记录数

//----------------------------统一ajax全局配置------------------------------------
// console.log($.ajaxSettings);
$.ajaxSetup({
  beforeSend: function () {
    $("#loading").fadeIn();
    // console.log('开发请求之前....');
  },
  complete: function (xhr) {
    $("#loading").fadeOut();
  },
  dataType: "json",
});

//全局 的ajax事件
// $.ajaxComplete  无论请求是否成功 ,请求结束
// $.ajaxError  请求失败
// $.ajaxSend 请求数据已发送
// $.ajaxStart 开始发起请求
// $.ajaxStop  请求停止 (目前没有ajax正在进行的请求)
// $.success  请求成功
// 使用示例 : $(document).ajaxError(function(){})
//定义一个获取数据的方法 = > 用于分页

function loadData(startNB, fristTime) {
  //获取数据渲染
  // start = (page - 1) * len; //后台要求的开始位置
  var staNB = startNB || 0;
  if (start <= 0) {
    start = 0;
  } else {
    start = staNB - 1 * len; //获取调用的传参
  }
  var data = {
    start: start,
    len: len,
  };
  API.jsonp("getStudent", data, function (res) {
    // console.log(res);
    if (res.code == 200) {
      //渲染数据
      var htmlStr = "";
      total = res.count; //总记录数据
      // console.log(res.data);
      $.each(res.data, function (index, item) {
        htmlStr +=
          '<tr data-sid="' +
          item.sid +
          '">\n' +
          // '                <td>' + ((page - 1) * len + index + 1) + '</td>\n' +  //序号
          "                <td>" +
          item.sid +
          "</td>\n" + //SID
          "                <td>" +
          item.name +
          "</td>\n" + //项目名称
          "                <td>" +
          item.sex +
          "</td>\n" + //核价工程师
          "                <td>" +
          item.class +
          "</td>\n" + //项目类型
          "                <td>" +
          item.class +
          "</td>\n" + //项目类型
          "                <td>" +
          item.address +
          "</td>\n" + //  项目总金额
          "                <td>" +
          moment(item.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") +
          "</td>\n" + //修改时间
          "                <td>" +
          moment(item.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") +
          "</td>\n" + //创建时间
          "                <td>\n" +
          '                    <button class="btn btn-success btn-xs look">\n' +
          '                        <span class="glyphicon glyphicon-eye-open"></span>\n' +
          "                        查看\n" +
          "                    </button>\n" +
          '                    <button class="btn btn-info btn-xs edit " title="功能开发中···"  disabled="disabled">\n' +
          '                        <span class="glyphicon glyphicon-eidt"></span>\n' +
          "                        编辑\n" +
          "                    </button>\n" +
          '                    <button class="btn btn-danger btn-xs delete " title="权限功能开发中···" disabled="disabled">\n' +
          '                        <span class="glyphicon glyphicon-remove"></span>\n' +
          "                        删除\n" +
          "                    </button>\n" +
          "                </td>\n" +
          "            </tr>";
      });
      //插入表格
      $(".table tbody").html(htmlStr);
      //Toast 提示
      Toast("加载数据成功~", "succes", 1500, 700);
      //重新处理分页
      pagination();
    } else {
      // console.log('数据请求失败!');
      //Toast 提示
      Toast("加载数据失败~", "error", 2000, 500);
    }
  });
}
//首次加载数据
loadData(0);

//点击添加学员模态框 =--开始=-----------------------------------
$("#addBtn").click(function () {
  //获取表单数据
  var tmp = $("#addForm").serializeArray(); //表单序列化 = > 直接将表单的数据内容提取为查询字符串格式(键=值)
  var data = formatData(tmp); //格式化数据
  // console.log("输出添加数据的请求上报接口数据-", data);
  //提交数据
  API.post("insertStudent", data, function (res) {
    // console.log(res);
    if (res.code == 200) {
      Toast(res.info, "warning", 1000, 600);
      //隐藏模态框
      $("#addModal").modal("hide");
    } else {
      Toast(res.info, res.code == 0 ? "error" : "warning", 1000, 500);
    }
  });
});
//点击添加学员模态框 =--结束=-----------------------------------

//点击修改学员模态框 =--开始=-----------------------------------
$("body").on("click", ".edit", function () {
  var sid = $(this).parents("tr").data("sid"); //获取当前查询记录的sid
  // checkOne(sid);
});
/*查询函数单独设置*/

// function checkOne(sid) {
//   //请求 ajax 数据
//   API.get("getStudentBySid", { sid: sid }, function (res) {
//     //前面一个sid是自定义要发送得参数后面是取到的sid
//     // console.log(res);
//     if (res.code == 200) {
//       Toast(res.info);
//       //数据回填
//       $.each(res.data, function (index, item) {
//         //遍历返回数据插入的表格 编列res.data里面的每条数据
//         // console.log(index,item);
//         if (index == "create_time") {
//           item = moment(item * 1000).format("YYYY年MM月DD日 HH:mm:ss");
//         }
//         //单独性别选项
//         if (index == "sex") {
//           $("#editForm [name=" + index + "]").filter("[value=" + item + "]")[0].checked = true;
//         } else {
//           $("#editForm [name=" + index + "]").val(item);
//         }
//       });
//       //显示模态框
//       $("#editModal").modal("show");
//     } else {
//       Toast(res.info, res.code == 0 ? "error" : "warning");
//     }
//   });
// }
/*///////////////////////////查询个人信息结束///////////////////////////////*/
//立即更新
$("#editBtn").click(function () {
  //获取数据 = > 调用更新数据接口
  var tmp = $("#editForm").serializeArray();
  var data = formatData(tmp);
  //提交数据
  API.post("updateStudentBySid", data, function (res) {
    // console.log(res);
    if (res.code == 200) {
      Toast(res.info);
      //隐藏模态框
      $("#addModal").modal("hide");
      //更新DOM
      var tds = $("tr[data-sid=" + data["sid"] + "]").children();
      // console.log(tds);
      tds.eq(2).html(data["name"]);
      tds.eq(3).html(data["sex"]);
      tds.eq(4).html(data["class"]);
      tds.eq(5).html(data["address"]);
      $("#editModal").modal("hide");
    } else {
      Toast(res.info, res.code == 0 ? "error" : "warning");
    }
  });
});

//点击查看学员模态框 =--结束=-----------------------------------

//删除查看学员模态框 =--开始=-----------------------------------
$("body").on("click", ".delete", function () {
  $("#confirmModal").modal("show");
  var sid = $(this).parents("tr").data("sid"); //获取当前删除按钮的sid标识
  //获取学员名字
  var name = $(this).parents("tr").children().eq(2).text();
  $("#confirmModal .modal-body span").html(name);
  //将sid 存入到模态框中
  // $("#confirmModal").attr("data-sid",sid);
  $("#confirmModal").data("sid", sid);
});

//确认删除 = > 调用后台接口 ,删除数据库的数据
$("#confirmDelete").click(function () {
  //取出sid , 然后再调用后台的删除接口
  var sid = $("#confirmModal").data("sid");
  //调用删除接口
  $("#confirmModal").modal("hide");
  API.post("removeStudentBySid", { sid: sid }, function (res) {
    // console.log(res);
    if (res.code == 200) {
      Toast(res.info, "", 1000, 500);
      //删除dom上的元素 , 更新局部的数据
      loadData(start, len);
    } else if (res.code == 101) {
      alert(res.msg);
      Toast(res.info, res.code == 100 ? "warning" : "error");
      // console.log(res)
    }
  });
});

//点击查看学员模态框 =--结束=-----------------------------------
//
//
// 封装一个Toast 组件 (提供重复利用)
// function Toast(msg, type, time1, time2) {//msg 提示的内容  ,type 类型风格
// $(".toast").remove();
// var type = type || 'success';
// var htmlStr = '<div class="toast ' + type + '">' + msg + '</div>';
// 插入body末尾处
// $("body").append(htmlStr);
// setTimeout(function () {
// $(".toast").fadeOut(time2, function () {
// $(this).remove();
// });
// }, time1);
// }
//
//封装一个处理表单序列化数据格式
function formatData(array) {
  var data = {};
  //处理需要提交的数据
  $.each(array, function (index, item) {
    data[item.name] = item.value;
  });
  return data;
}

//分页函数 (处理分页)
var btnNB = 0; //选项卡按钮编号
var page7 = 1; //选项卡按钮样式位置
// var btnNBZ = 0;
var count = 0;
function pagination() {
  count = Math.ceil(total / len); //取向上的页面整数
  var htmlStr = '<li class="prev"><a href="javascript:void(0)">&laquo;</a></li>';
  for (var i = 0; i <= count - (count - 6); i++) {
    //根据总的页面数循环
    // console.log("i:"+i);
    if (i < 6 && page < 6) {
      //k控制职能生成9个
      htmlStr += ' <li data-page="' + (i + 1) + '"><a href="javascript:void(0)">' + (i + 1 + btnNB) + "</a></li>";
    } else if (page >= 6) {
      //当按钮已经移到最右边
      // console.log(i + "page:" + page);
      htmlStr += ' <li data-page="' + (i + 1) + '"><a href="javascript:void(0)">' + (i + 1 + btnNB) + "</a></li>";
    }
  }

  //插入分页容器
  htmlStr += '<li id="dian"><a>...</a></li>';
  htmlStr += '<li><a href="javascript:void(0)">' + count + "</a></li>";
  htmlStr += '<li class="next"><a href="javascript:void(0)">&raquo;</a></li>';
  $(".pagination").html(htmlStr);

  //更新当前页的效果t同时移动按钮
  if (page >= 6) {
    page7 = 6;
    $(".pagination li").eq(1).remove(); //如果按钮已经在最右边就拿掉第一个并给最后一个激活
    $(".pagination li").eq(5).addClass("active"); //+btnNB只要大于等于第五个按钮就一直让第五个选项卡为激活
  } else {
    page7 = page; //否则按实际序号激活选项卡按钮样式
    // $(".pagination li").eq(1).remove();  //如果按钮已经在最右边就拿掉第一个并给最后一个激活
    $(".pagination li[data-page=" + page7 + "]").addClass("active"); //+btnNB
  }
  // page7=page;

  //检测是否为第一页 或者最后一页 ,禁用前后翻页
  if (page == 1) {
    $(".prev").addClass("disabled");
  } else if (page == count) {
    $(".next").addClass("disabled");
  }
  /*跳到最后一页选项卡按钮处理*/
  // console.log("btnNBZ:", "page:", page, "btnNB:", btnNB);
  if (page >= count) {
    //只要执行页码大于等于总的页码数就隐藏页码尾数及空格点
    // alert(count);
    $(".pagination li[data-page=7] a").hide(); //当跳到最后一页时因会照样生成六个按钮，故隐藏大于总页面数的选项卡按钮
    $(".pagination li").eq(7).hide(); //当跳到最后一页时因会照样生成六个按钮，故隐藏大于总页面数的选项卡按钮
    $(".pagination li").eq(8).hide(); //当跳到最后一页时因会照样生成六个按钮，故隐藏大于总页面数的选项卡按钮
  }
}

//下一页处理右翻页处理
var pageBtns;
$(".pagination").on("click", ".next:not(.disabled)", function () {
  page++;
  if (page >= 6) {
    page7 = 6;
    // btnNBZ = 1;
    btnNB++;
  } else page7 = page;
  loadData(0); //加载数据
  // console.log("page:", page);
  // pageBtns = $(".pagination li").length;
  // $(".pagination ").removeClass("active");
});

/*/左边翻页*/
$(".pagination").on("click", ".prev:not(.disabled)", function () {
  $(".pagination li[data-page=7] a").show(); //当跳到最后一页时因会照样生成六个按钮，故隐藏大于总页面数的选项卡按钮
  $(".pagination li").eq(7).show(); //当跳到最后一页时因会照样生成六个按钮，故隐藏大于总页面数的选项卡按钮
  $(".pagination li").eq(8).show(); //当跳到最后一页时因会照样生成六个按钮，故隐藏大于总页面数的选项卡按钮
  page--;
  if (btnNB <= 0) {
    btnNB = 0;
  } else btnNB--;

  loadData(0); //加载数据
  // console.log("page:", page);
});
/*goto跳转页面*/

function goto(gotopage) {
  var gotoPage = $("#goto").val() || gotopage; //如果前值为空就获取后面得值

  if (gotoPage != "") {
    if (parseInt(gotoPage) <= count) {
      page = gotoPage;
      btnNB = gotoPage - 6;
      loadData(0);
    } else alert("页码不能大于：" + count);
  } else {
    alert("跳转页数不能为空！");
  }
}
/*直接单击页码跳转页面*/

$(".text-center ").on("click", ".pagination li", function () {
  var index = $(this).index();

  if (index > 0 && index < 7) {
    //判断是否是按了1-7之间的选项卡按钮
    var index_page = $(this).text(); //取被单击选项卡按钮文本值
    var page_index = $(".pagination li").eq(5).text(); //取默认位置选项卡按钮值来判断是点击了左边还是右边
    page = index_page;

    if (index_page > 5) {
      //判断当前页是否还小于前五个选项卡页面值，如果小于单独设置页面

      if (index_page < page_index) {
        //如果被点击页面大于现有页码值
        /*判断是按了*/
        btnNB = index_page - 6;
        loadData(0);
      } else if (index_page > page_index) {
        //如果大于当前页码就是向后翻页

        btnNB = parseInt(index_page - 6);
        loadData(0);
      }
    } else {
      loadData(0); //单独正常运行前五个选项卡按钮单击事件
    }
  } else {
    if (index != 8) {
      //排除第八个最后一页按钮
      $(this).addClass("disabled");
    }
  }
  // alert(index+"index_page:"+index_page+":"+$(".pagination li").eq(index).text()+":"+page7+"page_index:"+page_index+"btnNB:"+btnNB);
});

/*单击最后一页*/
$(".text-center ").on("click", ".pagination li", function () {
  var index = $(this).index();
  if (index == 8) {
    //如果单击了最后一页
    goto(count); //直接调用跳转
  }
});
